<template>
  <!-----------------个人信息------------------>
  <view class="all">
    <hea :title="title"></hea>

    <div class="box1">
      <div
        style="
          width: 180px;
          line-height: 55px;
          font-size: 20px;
          margin-left: 25px;
        "
      >
        185 **** 8183
      </div>
      <div
        style="
          width: 90px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          font-size: 14px;
          border: 1px solid #5dcbf0;
          color: #5dcbf0;
          margin-top: 10px;
          margin-right: 15px;
        "
        @click="getCode"
        v-if="showText == true"
      >
        获取验证码
      </div>
      <div
        style="
          width: 90px;
          height: 35px;
          text-align: center;
          line-height: 35px;
          font-size: 14px;
          border: 1px solid #5dcbf0;
          color: #5dcbf0;
          margin-top: 10px;
          margin-right: 15px;
        "
        v-else
      >
        {{ second }}s重新发送
      </div>
    </div>
    <div class="box1">
      <div style="width: 100%">
        <u--input
          style="width: 84%; height: 40px; margin: 0 auto; height: 55px"
          placeholder="请输入内容"
          border="none"
          v-model="value"
          fontSize="20px"
          maxlength="4"
        ></u--input>
      </div>
    </div>
    <div
      v-if="value.length > 0"
      style="
        width: 90%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 10px;
        margin: 30px auto;
        background: rgb(250, 191, 80);
        color: white;
        font-size: 20px;
      "
      @click="next"
    >
      下一步
    </div>
    <div
      v-else
      style="
        width: 90%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border-radius: 10px;
        margin: 30px auto;
        background: #ffd79d;
        color: rgb(244, 244, 244);
        font-size: 20px;
      "
    >
      下一步
    </div>
  </view>
</template>
<script>
import hea from "../../components/hea.vue";
export default {
  components: {
    hea,
  },

  data() {
    return {
      title: "忘记密码",
      value: "",
      val: Math.floor(Math.random() * (9999 - 1000)) + 1000,
      second: 60,
      showText: true,
    };
  },

  methods: {
    next() {
      if (this.value == this.val) {
        uni.showToast({
          icon: "none",
          title: "登陆成功",
          duration: 2000,
        });
      } else {
        uni.showToast({
          title: "验证码错误",
          icon: "none",
          type: "error",
          duration: 2000,
        });
      }
    },
    getCode() {
      uni.showToast({
        icon: "none",
        title: "验证码为" + this.val,
        duration: 4000,
      });
      //倒计时
      this.showText = false;
      var interval = setInterval(() => {
        let times = --this.second;
        this.second = times < 10 ? "0" + times : times; //小于10秒补 0
      }, 1000);
      setTimeout(() => {
        clearInterval(interval);
        this.second = 60;
        this.showText = true;
      }, 30000);
    },
  },
  onShow() {},
};
</script>

<style scoped>
.all {
  width: 100vw;
  height: 100vh;
  background: white;
}
.box1 {
  width: 100%;
  height: 55px;
  background-color: white;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.5px solid rgb(206, 206, 206);
  border-top: 0.5px solid rgb(206, 206, 206);
  margin-top: 15px;
}
</style>
